<template>
	<view id="app">
		<view class="healthyteam_er">
			<view class="healthyteam_noe">
				<view class="healthyteam_two" :class="renwuType == 1?'healthyteam_five':''" @click="typeClick(1)">健康顾问</view>
				<view class="healthyteam_three" :class="renwuType == 2?'healthyteam_five':''" @click="typeClick(2)">健康专家</view>
				<view class="healthyteam_four" :class="renwuType == 3?'healthyteam_five':''" @click="typeClick(3)">健康管理师</view>
			</view>
			<view style="width: 100%;height: 50vh;" v-if="!info">
				
			</view>
			<view class="healthyteam_san" v-if="info"> 
				<view class="healthyteam_ersan">
					<image class="healthyteam_si" :src="info.avatarAddress"/>
					<span class="healthyteam_liu">{{info.name}}</span>
					<span class="healthyteam_qi">{{info.degree}}</span>
				</view>
				
				<view class="healthyteam_wu">
					<view class="healthyteam_ba healthyteam_erer" v-html="info.summary"></view>
				</view>
			</view>
		</view>
		<view class="healthyteam_shiyi" v-if="list.length > 0">
			<view class="healthyteam_shier">
				<span class="healthyteam_shisan" v-if="renwuType == 1">顾问列表</span>
				<span class="healthyteam_shisan" v-if="renwuType == 2">专家列表</span>
				<span class="healthyteam_shisan" v-if="renwuType == 3">管理师列表</span>
				<span class="healthyteam_shisi">(排名不分先后)</span>
			</view>
			<view class="healthyteam_shiwu">
				<view class="healthyteam_ersi">
					<view class="healthyteam_shiliu" v-for="(item,index) in list" :key="index" @click="infoClick(index)">
						<image class="healthyteam_shiqi" mode="aspectFill" :src="item.avatarAddress"/>
						<span class="healthyteam_shiba">{{item.name}}</span>
						<span class="healthyteam_shiba">{{item.degree}}</span>
					</view>
				</view>
				<view class="healthyteam_shijiu" @click="showMore" v-if="zongzhi > 20 && num < zongzhi">
					<span class="healthyteam_ershi">显示更多</span>
					<image class="healthyteam_eryi" src="../../static/img/renwu_gengduo.png"/>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			   renwuType:1,
			   list:[],
			   num:20,
			   info:{},
			   present:'',
			   zongzhi:0
			}
		},
		onLoad() {
			this.teamList()
		},
		methods:{
			typeClick(index){
				this.renwuType = index
				this.teamList();
			},
			teamList() {
				this.$api.healthList({type:this.renwuType,start:0,limit:this.num }).then((res) => {
					if (res.data.returnCode == 200) {
						// console.log(res)
						this.list = res.data.listDtos[0].detailsDtos.elements
						this.info = this.list[0]
						this.zongzhi = res.data.listDtos[0].detailsDtos.totalCount
						this.present = this.list[0].summary
					}
				})
			},
			//获取详情
			infoClick(index){
				this.info = this.list[index]
				this.present = this.list[index].summary
			},
		}
	}
</script>

<style lang="scss" scoped>
	#app {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		width: 750upx;
		background-color: #F8F8F8;
		.healthyteam_er {
		  display: flex;
		  flex-direction: column;
		  background: url(../../static/img/renwu_bj.png) no-repeat;
		  background-size: 100%; 
		  position: fixed;
		  top:86upx;
		  left: 0;
		  .healthyteam_noe {
		    display: flex;
		    align-items: center;
		    margin: 37upx 90upx; 
			view {
				width: calc(100% / 3);
				height: 60upx;
				line-height: 60upx;
				text-align: center;			
				font-size: 28upx;
				background: #fff;	  				
				color: #000000;
			}
			.healthyteam_two {
				border-radius: 30upx 0 0 30upx;
			}
			.healthyteam_four {
				border-radius: 0 30upx 30upx 0;
			}
			.healthyteam_five {
				background: #7bd3a7;
				color: #fff;
			}
			
		  }
		}
	}
	.healthyteam_liu,
	.healthyteam_qi {
		margin: 20upx auto 28upx;
		color: #333333;
		font-size: 28upx;
		text-align: center;
	}
	.healthyteam_qi {
		font-size: 26upx;
		margin: 0;
	}
	.healthyteam_san {
	  display: flex;
	  background: #fff;
	  margin: 0 24upx;
	  border-radius:12upx;
	  min-height: 440upx; 
	  width: 702upx;
	  background-color: #FFFFFF;
	  .healthyteam_ersan {
	    display: flex;
	    flex-direction: column;
	    margin-left: 20upx; 			
	  }
	  
	}
	.healthyteam_si {
		width: 165upx;
		height: 233upx;
		border-radius: 12upx;
		margin-top: 20upx;
	}
	.healthyteam_wu {
		color: #333333;
		font-size: 24upx;
		display: flex;
		margin: 21upx;
		flex-direction: column;
		text-align: justify;
		line-height: 38upx;
		max-height: 400upx;
		overflow: auto;
	}
	.healthyteam_shiyi {
	  display: flex;
	  flex-direction: column;
	  position: fixed;
	  top: 662upx;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 2; 
	}
	.healthyteam_shier {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 20upx 0 0 0; 
	  .healthyteam_shisan {
		  color: #333333;
		  font-size: 30upx;
	  }
	  .healthyteam_shisi {
		  color: #999999;
		  font-size: 22upx;
		  margin-left: 15upx;
	  }
	}
	.healthyteam_shiwu {
		display: flex;
		flex-direction: column;
		margin: 0 24upx;
		position: absolute;
		top: 100upx;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: auto;
		.healthyteam_ersi {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.healthyteam_shiliu {
				width: 202upx;
				background: white;
				box-shadow: 0 3upx 10upx 0 #E5E5E5;
				border-radius: 12upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 22upx 0;
				margin:0 48upx 22upx 0;
				image {
					width: 158upx;
					height: 144upx;
					border-radius: 10upx;
					margin-bottom: 14upx;
				}
				span {
					font-size:26upx;
					color: #333333;
					line-height: 40upx;
					text-align: center;
				}
			}
			.healthyteam_shiliu:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>
